<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/lib/haha/core/start.js"></script>
    <link rel="stylesheet" href="/CSS/pageNation.css">
    <link rel="stylesheet" href="/CSS/periodical.css">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <style>
        .inp-btn1 {
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="header"></div>
    <div class="container">
        <!-- 静态封面 -->
        <div class="topBox flex-between">
            <img src="/image/index/book-1.png" alt="">
            <div class="rightBox">
                <p>《天然气勘探开发动态》</p>
                <div class="flex-start-start">
                    <div class="base">
                         <ul>
                             <li class="flex-start-start"><span class="name">主办单位：</span><span class="st">勘探开发研究院科研服务中心</span></li>
                             <li class="flex-start-start"><p style='color: #333;'>内部期刊，仅供研究学习使用</p></li>
                            </ul>
                    </div>
                    <!-- <div class="info" style="margin-left: 10px;">
                        <p>出版信息</p>
                        <ul>
                            <li class="flex-start-start"><span class="name">期:</span><span class="st">2021（01）</span></li>
                            <li class="flex-start-start"><span  class="name">总期次:</span class="st"><span>345</span></li>
                        </ul>
                    </div> -->
                </div>

            </div>
        </div>
        <div  class="cont-box">
            <!--检索框-->
            <div class="search flex-end">
                <!-- 搜索 -->
                <div class="searchPart flex" id='search'>
                </div>
            </div>
            <!--检索框结束-->

            <div class="qk-content">
                <div class="qk-content-box flex-r-b">
                    <div class="qk-book">
                        <div class="list">
                            <div class="list-title"><span id='name'>年份</span></div>
                            <!--这里是复选框-->
                            <div class="checkboxs">
                                <script id="checkboxs" type="text/html">
                                <div class="checkbox" data-code="{{:#data['code']}}"  data-sysId="{{:#data['sysId']}}" title="{{:#data['name']}}">
                                    {{:#data['name']}}
                                </div>
                            </script>
                            </div>
                        </div>
                    </div>
                    <div class="book-box" style="position: relative;">
                        <span class="bt">目录</span>
                        <ul class="flex" style="font-size: 16px;color: #333;font-weight: bold;margin: 10px 10px;text-align: center;"><li style="flex:1">题名</li><li style="width: 160px;">期</li><li style="width: 160px;">更新时间</li></ul>
                        <span id='periodicalMention'
                            style="display: none;text-align: center;position: absolute;left:46.7%;">暂无数据</span>
                        <ul style="min-height: 410px;width: 100%;" class="book">
                            <script id="periodicalData" type="text/html">
                                <li class="flex oneBox"> 
                                    <div class="book-img-box title" title='{{:#data["title"]}}' data-sysid='{{:#data["sysId"]}}' data-tablecode='{{:#data["tableCode"]}}' data-datasource='{{:#data["datasource"]}}' data-title='{{:#data["title"]}}'>
                                        {{:#data["title"]}}
                                    </div>
                                    <!-- 期 年-->
                                <div class="qi">{{:#data["year"]}}/{{:#data["stage"]}}期</div>
                                <div class="time"> {{:#data["recordUpdateDate"].split(' ')[0]}}</div>
                                </li>
                       
                        </script>
                        </ul>
                        <!-- 分页 -->
                        <div class="pageNation">
                            <div id="test1"></div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <!-- 脚部 -->
    <div id="footer"></div>
    <!-- 侧边固定按钮 -->

    <script type="text/javascript" src="/lib/layer-v3.1.1/layer/layer.js"></script>
    <script src="/lib/layui/layui.js"></script>
    <script type="text/javascript">
        shared.useLayout("act-1");
        core.useTemplateAuto('selectArr', config.selectwwqkArr, {});
        // 成果
        $('#achievementMenu').load('/shared/achievementMenu.html');
    </script>
    <script>
        var postTableData = {
            searchKey: '',
            searchValue: '',
            // 当前页
            page: 1,
            // 每页显示条数
            pageSize: 12,
            sortArr: [],
            yearArr: [],
            tableCode: "YQTZWQK_METADATA"
        };
        var list = [];
        var className = base.getQueryParam('className');
        function render(data, index) {
            return {
                showImg: function (data, index) {
                    if (Number(data.sysId) % 2) {
                        return '/image/periodical/book.png';
                    } else {
                        return '/image/periodical/book2.png';
                    }
                },
                text: function (data, index) {
                    return base.overflow(data.title, "tempSpan4GetStr", 50)
                }
            }
        }
        var callBackPage = function callBack(curr, limit) {
        };
        function goMultiSearch() {
            postTableData.searchKey = $("#searchselect").find("option:selected").val();
            postTableData.searchValue = $("#searchWord").val();
            // 侧边栏数据
            pageData.tableData(config.complexSearchQKYD, postTableData, 'periodicalData', 'test1', true, '#periodicalMention', render(), true, callBackPage);
            if ($("#searchWord").val() &&!base.patrn.test($("#searchWord").val())) {
                pageData.InsertLog('期刊阅览', '检索', $("#searchWord").val());
            }
        }
        $(function () {
            // 点击检索事件
            $('#searchBtn').click(function () {
                goMultiSearch();
            })
            getMenue();
            function getMenue() {
                shared.ajaxGet(config.getYear_Chinese, {}, function callback(res) {
                    core.useTemplateAuto('checkboxs', res, {});
                    for (let i of res) {
                        list.push(i.code)
                    }
                    postTableData.yearArr = list;
                    pageData.tableData(config.complexSearchQKYD, postTableData, 'periodicalData', 'test1', true, '#periodicalMention', render(), true, callBackPage);
                })
            }
            $('.checkboxs').click(function (e) {
                if ($(e.target).hasClass('checkbox')) {
                    $('.checkboxs div').each(function (index, item) {
                        if ($(e.target).index() == index) {
                            $(e.target).toggleClass('checked');
                            $(e.target).hasClass('checked') ? postTableData.yearArr = [$(e.target).attr('data-code')] : postTableData.yearArr = list;
                            pageData.tableData(config.complexSearchQKYD, postTableData, 'periodicalData', 'test1', true, '#periodicalMention', render(), true, callBackPage);
                        } else {
                            $(item).removeClass('checked')
                        }
                    })
                }
            })
            $('.book').click(function (e) {
                if ($(e.target).hasClass('title')) {
                    window.open('/magazineDetail.html?sysId=' + $(e.target).attr('data-sysid') + '&tablecode=' + postTableData.tableCode)
                }
            })

        })
    </script>
</body>

</html>